表單輸入綁定(2)

值綁定

對於單選按鈕，複選框和選擇器選項，v-model 綁定的值通常是靜態的字符串 (或者對複選框是布爾值)：

<!-- `picked` 在被選擇時是字符串 "a" -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` 只會為 true 或 false -->
<input type="checkbox" v-model="toggle" />

<!-- `selected` 在第一項被選中時為字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但有時我們可能希望將該值綁定到當前組件實例上的動態數據。這可以通過使用 v-bind 來實現。此外，使用 v-bind 還使我們可以將選項值綁定為非字符串的數據類型。

複選框

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

true-value 和 false-value 是 Vue 特有的 attributes，僅支持和 v-model 配套使用。這裡 toggle 屬性的值會在選中時被設為 'yes'，取消選擇時設為 'no'。你同樣可以通過 v-bind 將其綁定為其他動態值：

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

true-value 和 false-value attributes 不會影響 value attribute，因為瀏覽器在表單提交時，並不會包含未選擇的複選框。為了保證這兩個值 (例如：“yes”和“no”) 的其中之一被表單提交，請使用單選按鈕作為替代。

單選按鈕

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

pick 會在第一個按鈕選中時被設為 first，在第二個按鈕選中時被設為 second。

選擇器選項

<select v-model="selected">
  <!-- 內聯對象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>

v-model 同樣也支持非字符串類型的值綁定！在上面這個例子中，當某個選項被選中，selected 會被設為該對象字面量值 { number: 123 }。

修飾符

.lazy

默認情況下，v-model 會在每次 input 事件後更新數據 (IME 拼字階段的狀態例外)。你可以添加 lazy 修飾符來改為在每次 change 事件後更新數據：

<!-- 在 "change" 事件後同步更新而不是 "input" -->
<!-- 完全輸入完成後才進行更新 -->
<input v-model.lazy="msg" />

.number

如果你想讓用戶輸入自動轉換為數字，你可以在 v-model 後添加 .number 修飾符來管理輸入：

<input v-model.number="age" />

如果該值無法被 parseFloat() 處理，那麼將返回原始值。

number 修飾符會在輸入框有 type="number" 時自動啟用。

.trim

如果你想要默認自動去除用戶輸入內容中兩端的空格，你可以在 v-model 後添加 .trim 修飾符：

<input v-model.trim="msg" />